<template>
	<view class="page">
		<!-- 头部 start -->
		<view class="cu-custom bg-white   " :style="[{ height: CustomBar + 'px'}]">
			<view class="cu-bar bg-top fixed bg-white"
				:style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
				<view class="margin-left width-160 text-left" @tap="back"><text class="cuIcon-back"></text></view>
				<view class="">{{pageType=='goods'?'商品参数':'包装清单'}}</view>
				<view class="right margin-right text-right width-160">
					<text class="text-df text-theme text-right " @click="addPop('','add')">+添加</text>
				</view>
			</view>
		</view>
		<!-- 头部 end -->
		<!-- 筛选 -->
		<!-- loading组件 -->
		<fu-loading v-if="isShowLoading"></fu-loading>
		<block v-else>
			<!--商品列表 start-->
			<view class=" padding-lr-24 padding-bottom-140 relative  margin-top-sm">
				<view class=" w100">
					<view class="flex align-center margin-bottom-sm bg-white padding-sm radius-16"
						v-for="(item, index) in cateLists" :key="index">
						<view class="w100">
							<view class="flex align-center solid-bottom relative  padding-tb justify-between">
								<view class="flex align-center text-df">
									<view class="text-333 ">{{item.title||""}} </view>
								</view>
								<view class="">{{item.value||''}} </view>
							</view>
							<view class="flex justify-end margin-top algin-center">
								<view class=" text-666   text-df margin-right " @tap="delItem(item)">
									<text class="cuIcon-delete margin-right-xs"></text> 删除
								</view>
								<view class="  text-666   text-df  " @tap="addPop(item,'edit')">
									<text class="cuIcon-edit margin-right-xs"></text> 编辑
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
			<!-- 空布局 -->
			<fu-empty-ui v-if="cateLists.length == 0 "></fu-empty-ui>
		</block>
		<view class="footer-box bg-theme1 radius-100 text-center text-white padding-tb-sm" @click.stop="confirmAdd">确认</view>
		<!-- 库存输入弹框 -->
		<fu-popup v-model="isShowCate" mode="center" border-radius="16" :mask-close-able="false" :zIndex="997">
			<view class="bg-white width-560">
				<view class="text-center padding text-lg text-333" v-if="popType=='add'">
					{{pageType=='goods'?'添加商品参数':'添加包装清单'}}</view>
				<view class="text-center padding text-lg text-333" v-if="popType=='edit'">
					{{pageType=='goods'?'修改商品参数':'修改包装清单'}}</view>
				<view class="padding-lr padding-bottom">
					<view class="  text-df text-333">标题</view>
					<view class="bg-f8 radius-8 padding-sm text-df margin-top">
						<input type="text" maxlength="20" placeholder="请输入标题名称" v-model="title"
							placeholder-class="text-df text-999">
					</view>
				</view>
				<view class="padding-lr padding-bottom">
					<view class="  text-df text-333">内容</view>
					<view class="bg-f8 radius-8 padding-sm text-df margin-top">
						<input type="text" maxlength="20" placeholder="请输入内容" v-model="content"
							placeholder-class="text-df text-999">
					</view>
				</view>
				<view class="foot solid-top flex align-center justify-between height-100">
					<view class="flex-sub text-gray solid-right text-center" @click="isShowCate=false">取消</view>
					<view class="flex-sub text-theme text-center" @click="handleConfirm">确定</view>
				</view>
			</view>
		</fu-popup>

		<!-- 断网检测组件 -->
		<fu-notwork></fu-notwork>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cateLists: [],
				isShowCate: false,
				cateName: '',
				isOpen: false,
				title: '', //标题
				content: '', //内容
				type: '', //弹框类型
				addType: '', //添加类型 child 子类
				editType: '', //添加类型 child 子类
				isShowLoading: false,
				popType: '', //弹框类型  add 添加  edit 修改
				pageType: '', //goods 商品参数  list 清单
				editTitle: '', //修改标题

			};
		},
		onLoad(e) {
			this.pageType = e.pageType
			if (e.data && e.data.length > 0) {
				this.cateLists =JSON.parse(e.data)
			}
			console.log( this.cateLists, 'this.cateLists');
			// json {\"title\":\"充电器\", \"value\":\"500W\"}
		},
		onShow() {

		},
		onUnload() {

		},
		onHide() {
			// let data = {}
			// if (this.pageType == 'goods') {
			// 	uni.$emit('goodsInfo', data)
			// } else {
			// 	uni.$emit('packInfo', data)
			// }
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			addPop(item, type) {
				this.popType = type
				if (type == 'add') {
					this.title = ''
					this.content = ''
					this.isShowCate = true
				} else {
					this.title = item.title
					this.content = item.value
					this.editTitle = item.title
					this.isShowCate = true
				}
			},
			confirmAdd(){
				if(this.pageType=='goods'){ //商品参数
					uni.$emit('goodsInfo',this.cateLists)
				}else{ //包装清单
					uni.$emit('packInfo',this.cateLists)
				}
				uni.navigateBack()
			},
			handleConfirm() {
				if (!this.title) {
					return this.$message.info('请输入标题')
				}
				if (!this.content) {
					return this.$message.info('请输入内容')
				}
				if (this.popType == 'add') {
					this.cateLists.push({
						title: this.title,
						value: this.content,
					})
				} else {
					let index = this.cateLists.findIndex((item) => item.title == this.editTitle)
					this.cateLists[index].title = this.title
					this.cateLists[index].value = this.content
				}
				this.isShowCate = false
			},
			// 删除分类
			delItem(item) {
				this.$util.showModal({
					title: this.i18n['提示'],
					content: '确定要删除该分类吗?',
					confirmColor: this.$store.state.themeColor,
					success: (res) => {
						if (res.confirm) {
							let index = this.cateLists.findIndex((child) => child.title == item.title)
							this.cateLists.splice(index, 1)
						}
					}

				})

			},
			// 修改名称
			editItem(item, child, type) {
				this.type = 'edit'
				this.isShowCate = true

				if (type == 'child') {

				} else {

				}
			},
			getCate() {
				this.$api
					.post('', data)
					.then(res => {
						this.isShowLoading = false;
						if (res.data.code == 1) {
							this.cateLists = res.data.data
						} else {
							this.$message.error(res.data.msg);
						}
					})
					.catch(err => {
						this.isShowLoading = false;
					});
			},
		},

	}
</script>

<style>
	.hiddenBox {
		position: absolute;
		top: 62rpx;
		right: 0;
		width: 160rpx;
		z-index: 199;
	}

	.hiddenText {
		position: absolute;
		top: 62rpx;
		right: 0;
		width: 160rpx;
		z-index: 299;
	}
	.footer-box{
		position: fixed;
		bottom: 5%;
		left: 0;
		right: 0;
		margin: auto;
		width: 93%;
	}
</style>
